<template>
	<Layout :showBack="true" :innerBottom="false">
		<template #title>搜索</template>
		<view class="inline-flex fill jcc home-search">
			<view class="inline-flex aic jcsb home-search-box">
				<image class="home-search__icon" src="/static/image/home/search.png"></image>
				<input class="home-search__input" v-model="keyword" placeholder="律师、律所、服务、擅长"
					placeholder-class="home-search__input--placeholder"
					placeholder-style="color: #C0C0C0;font-size: 28rpx;" confirm-type="搜索" @confirm="tapToSearch" />
				<image v-if="keyword" class="home-search__clear" src="/static/image/other/clear.png"
					@click.stop="tapClear"></image>
				<view class="inline-flex aic jcc home-search__button" @click.stop="tapSearch">搜索</view>
			</view>
		</view>
		<view class="inline-flex fill jcc search-tabs">
			<u-tabs style="width:100%" height="56" fontSize="28" bgColor="#FFF" activeColor="#FF710A"
				:activeItemStyle="{fontSize:'32rpx'}" inactiveColor="#6E6E6E" barHeight="3" :list="tabs"
				v-model="current"></u-tabs>
		</view>
		<view class="flex search-body">
			<Law v-if="current<=1" ref="bodyRef" :keyword="keyword" :lawFirmType="current+1"></Law>
			<Service v-else ref="bodyRef" :keyword="keyword"></Service>
		</view>
	</Layout>
	<LoginPopup></LoginPopup>
</template>

<script setup lang="ts">
	import Service from './components/service.vue';
	import Law from './components/law.vue';
	import { setTabbar } from '@/utils/wx';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { isEmpty } from '@/utils/util';
	setTabbar({ selected: 0 });
	const bodyRef = ref();
	const current = ref(0);
	const tabs = ref([
		{ name: '律师' },
		{ name: '律所' },
		{ name: '服务' },
	]);

	const keyword = ref('');

	function tapClear() {
		keyword.value = '';
	}

	function tapSearch() {
		bodyRef.value.search();
	}

	onLoad((options) => {
		options = options as any;
		keyword.value = options.keyword;
	});
</script>

<style lang="scss">
	.home-search {
		padding: 30rpx;

		&-box {
			width: 690rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 58rpx;
			border: 1px solid #FDD6BB;
		}

		&__icon {
			width: 28rpx;
			height: 27rpx;
			margin-left: 30rpx;
		}

		&__input {
			margin-left: 16rpx;
			width: 470rpx;
			height: 40rpx;
			padding-right: 50rpx;

			&--placeholder {
				color: #C0C0C0;
				font-size: 28rpx;
			}
		}

		&__clear {
			position: absolute;
			right: 134rpx;
			width: 40rpx;
			height: 39rpx;
		}

		&__button {
			margin-right: 1px;
			width: 124rpx;
			height: 68rpx;
			background: linear-gradient(137deg, #FFA462 0%, #FF6B00 100%);
			border-radius: 54rpx 54rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 68rpx;
			color: #FFFFFF;
		}
	}


	.search-tabs {
		height: 116rpx;
		padding: 24rpx 0;
		overflow: hidden;
		background: #FFF;
	}

	.search-body {
		width: 750rpx;
		background: #FFF;
		overflow: hidden;
	}
</style>